<script lang="ts">
  import { actixGraphqlEndpoint } from "$lib/js/stores";

  import type { Folder, KV } from "$lib/ebm";
  import {
    Query,
    useQuery,
    useMutation,
    useQueryClient,
  } from "@sveltestack/svelte-query";
  import { request, gql } from "graphql-request";
  export let attributes: KV[] = [
    {
      k: "subject",
      v: "en",
    },
  ];

  let folderid = attributes.find((x) => x.k == "folder_id");
  let classPointerEventsNone;
  const onMouseDown = () => {
    classPointerEventsNone = "pointer-events-none";
  };
  const onMouseUp = () => {
    classPointerEventsNone = "";
  };

  let endpoint = $actixGraphqlEndpoint;
  const FIND_FOLDER_QUERY = gql`
    query ($id: ID!) {
      folder: node(id: $id) {
        id
        createdAt
        updatedAt
        ... on Folder {
          folderName
          snapshotAt
          seq
          title
          description
          refererUrl
          ancestry
          status
          pid
          from
          quizzes {
            id
            seq
            level
            subject
            m3U8
            title
            description
            createdAt
            updatedAt
            status
            from
          }
        }
      }
    }
  `;

  const findFolderResult = useQuery<Folder, { message: string }>(
    ["folder", folderid.v],
    async () => {
      const { folder } = await request(endpoint, FIND_FOLDER_QUERY, {
        id: folderid.v,
      });
      return folder;
    }
  );

  let activePropertyId = "";
  const handlePropertyClick = (id) => () => (activePropertyId = id);
</script>

{#if $findFolderResult.isLoading}
  Loading...
{:else if $findFolderResult.isError}
  Error {$findFolderResult.error.message}
{:else if $findFolderResult.data}
  <div class="w-full grid grid-cols-2">
    <table class="bg-white text-gray-900 table-auto ">
      <thead>
        <tr>
          <th colspan="2" class=" text-lg text-left">
            <i class="fas fa-clipboard-list mx-2" />
            Properties Of This Folder({$findFolderResult.data.title})
          </th>
        </tr>
        <tr>
          <th class="bg-blue-700 text-white p-2">Property</th>
          <th class="bg-blue-700 text-white p-2">Value</th>
        </tr>
      </thead>
      <tbody>
        <tr
          class="{activePropertyId === 'seq'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 border-b border-teal-500 "
          on:click={handlePropertyClick("seq")}
        >
          <td class="p-2 text-right text-lg font-bold">seq</td>
          <td class="p-2">
            <input
              type="number"
              value={$findFolderResult.data.seq}
              class="w-full h-8 rounded-sm"
            />
          </td>
        </tr>

        <tr
          class="{activePropertyId === 'title'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 border-b border-teal-500 "
          on:click={handlePropertyClick("title")}
        >
          <td class="p-2 text-right text-lg font-bold">title</td>
          <td class="p-2">
            <input
              type="text"
              value={$findFolderResult.data.title}
              class="w-full h-8 rounded-sm"
            />
          </td>
        </tr>

        <tr
          class="{activePropertyId === 'description'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 "
          on:click={handlePropertyClick("description")}
        >
          <td class="p-2 text-right text-lg font-bold">description</td>
          <td class="p-2">
            <textarea
              type="text"
              class="resize-y rounded-md w-full"
              value={$findFolderResult.data.description}
            />
          </td>
        </tr>
      </tbody>
    </table>
    <div class="ml-2 bg-gray-100 flex flex-col">
      <div class=" text-lg text-left">Property (Description) Preview</div>
      <div>html preview for the property(Description)</div>
    </div>
  </div>
{:else}
  No Property for folderid.k={folderid.v}?
{/if}
